<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Img</title>
</head>
<body>
    <p>
        一副图像:
        <img src="../images/eg_mouse.jpg" width="128" height="128"/>
    </p>
    <p>
        一副动画图像:
        <img src="../images/eg_cute.gif" width="50" height="50"/>
    </p>
    <p>插入 图片和gif 的并没有直接的区别</p>
    <p>
        来自 W3School.com.cn 的图像：
        <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
    </p>
    <p>测试img 中的 alt 属性 作为图片还没加载出来的placeHolder 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。
        此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，
        并且对于那些使用纯文本浏览器的人来说是非常有用的</p>
    <p>
        <img src="boat.gif" alt="Big Boat"/>
    </p>
    <p>gif 和 jpg 都可以作为HTML背景</p>
    <p>如果图像小于页面，图像会进行重复。也就是多张图片重复铺满整个界面</p>

    <h2>设置图片在文本中的位置</h2>
    <p>图像<img src="../images/eg_cute.gif"/>在文本中</p>
    h2>已设置对齐方式的图像：</h2>
    <p>图像 <img src="../images/eg_cute.gif" align="bottom"> 在文本中</p>
    <p>图像 <img src ="../images/eg_cute.gif" align="middle"> 在文本中</p>
    <p>图像 <img src ="../images/eg_cute.gif" align="top"> 在文本中</p>
    <p>请注意，bottom 对齐方式是默认的对齐方式。</p>

    <p>
        <img src="../images/eg_cute.gif" align="left"/>
        带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
    </p>
    <p>
        <img src ="../images/eg_cute.gif" align ="right">
        带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
    </p>

    <p>请点击图像上的星球，把它们放大。</p>

    <!--
        有不同的circle  coords  为圆心 和 半径的大小
        rect  为 x ,y width height 的大小
        其实native 中的coors 等属性很多源自于web中的属性
    -->
    <img src="../images/sun.jpg" border="0" usemap="#planetmap" alt="Planets"/>
    <map name="planetmap" id="planetmap">
        <area shape="circle" coords="180,139,14" href="../html/basic_HTML.html" target="_blank"  alt="Venus"/>
        <area shape="circle" coords="129,161,10" href="../html/canvas.html" target="_blank" alt="Mercury" />
        <area shape="rect" coords="0,0,110,260" href="computerCode.html" target="_blank" alt="Sun"/>
    </map>

    <p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。状态栏是浏览器底部的栏目</p>
    <a href="../html/css_table3.html">
        <img src="../images/sun.jpg" ismap/>
    </a>
</body>
</html>


































